import Link from "next/link";

import { SiteFooter } from "@/components/site-footer";

import { notFound } from "next/navigation";

import { revalidatePath } from "next/cache";

import { EVENT_TYPE } from "@stepping/types";

import { serverCaller } from "@/lib/trpc/server";

import { cityTimeZone, fmtEventTime } from "@/lib/format";

export const dynamic = "force-dynamic";

const TYPE_LABEL: Record<string, string> = {

  set: "Set",

  weekender: "Weekender",

  class: "Class",

  workshop: "Workshop",

  competition: "Competition",

  special: "Special event",

  social: "Social",

};

const MODULES = [

  { seg: "floor", label: "The Floor", note: "Groups, DJs, promoters, instructors, classes" },

  { seg: "videos", label: "The Tape", note: "Sets and footwork on camera" },

  { seg: "road", label: "The Road", note: "Host hotels, event centers, food, the city guide" },

  { seg: "live", label: "Live", note: "Watch a set live, or go live" },

];

export default async function CityPage({

  params,

}: {

  params: Promise<{ slug: string }>;

}) {

  const { slug } = await params;

  const caller = serverCaller();

  const city = await caller.city.bySlug({ slug });

  if (!city) notFound();

  const tz = cityTimeZone(city.state);

  const events = await caller.event.list({ cityId: city.id });

  const citySponsors = await caller.sponsor.listActive({ cityId: city.id });

  const liveNow = events.filter((e) => e.isLive);

  const promotions = events.filter((e) => e.isPromoted && !e.isLive);

  const specials = events.filter((e) => e.type === "special");

  const sets = events.filter((e) => !e.isLive);

  async function addEvent(formData: FormData) {

    "use server";

    const title = String(formData.get("title") ?? "").trim();

    const type = String(formData.get("type") ?? "set");

    const description = String(formData.get("description") ?? "").trim();

    const startsAtRaw = String(formData.get("startsAt") ?? "");

    const isPromoted = formData.get("isPromoted") != null;

    if (!title) return;

    await serverCaller().event.create({

      cityId: city!.id,

      title,

      type: type as (typeof EVENT_TYPE)[number],

      description: description || undefined,

      startsAt: startsAtRaw ? new Date(startsAtRaw) : undefined,

      isPromoted,

    });

    revalidatePath(`/city/${slug}`);

  }

  return (

    <main className="mx-auto w-full max-w-3xl px-5 py-16 sm:px-8">

      <Link href="/" className="kicker hover:text-gold">

        ← Chicago Stepping

      </Link>

      <p className="kicker mt-10 text-ash">

        {city.metroLabel} · {city.lat?.toFixed(3)}, {city.lng?.toFixed(3)}

      </p>

      <h1 className="display mt-3 text-7xl sm:text-8xl">{city.name}</h1>

      <p className="serif mt-5 max-w-xl text-xl text-ash">

        The sets, the people, the music, and the road in. Everything Chicago

        steppin' in {city.name}, in one place.

      </p>

      {}

      {liveNow.length > 0 ? (

        <Link

          href={`/city/${slug}/live`}

          className="mt-10 flex items-center justify-between border border-gold bg-gold/10 px-5 py-4 hover:bg-gold/20"

        >

          <span className="kicker flex items-center gap-3 text-gold">

            <span className="inline-block h-2.5 w-2.5 animate-pulse rounded-full bg-gold" />

            Live now · {liveNow.length} streaming

          </span>

          <span className="kicker text-gold">Watch →</span>

        </Link>

      ) : null}

      {}

      <nav className="mt-10 grid gap-px sm:grid-cols-2">

        {MODULES.map((m) => (

          <Link

            key={m.seg}

            href={`/city/${slug}/${m.seg}`}

            className="group border-t border-[var(--line)] py-6 pr-6"

          >

            <div className="flex items-center justify-between">

              <h2 className="display text-3xl group-hover:text-gold">{m.label}</h2>

              <span className="kicker text-gold opacity-0 group-hover:opacity-100">

                →

              </span>

            </div>

            <p className="serif mt-1 text-lg text-ash">{m.note}</p>

          </Link>

        ))}

      </nav>

      {}

      {citySponsors.length > 0 ? (

        <div className="mt-10 border-t border-[var(--line)] pt-5">

          <p className="kicker text-ash">Sponsored in {city.name}</p>

          <div className="mt-3 flex flex-wrap gap-x-8 gap-y-3">

            {citySponsors.map((s) => {

              const inner = (

                <span className="group inline-flex items-baseline gap-2">

                  <span className="display text-2xl text-bone group-hover:text-gold">

                    {s.name}

                  </span>

                  {s.blurb ? (

                    <span className="serif text-lg text-ash">{s.blurb}</span>

                  ) : null}

                </span>

              );

              return s.linkUrl ? (

                <a key={s.id} href={s.linkUrl} target="_blank" rel="noopener noreferrer nofollow">

                  {inner}

                </a>

              ) : (

                <span key={s.id}>{inner}</span>

              );

            })}

          </div>

        </div>

      ) : null}

      {}

      {promotions.length > 0 ? (

        <section className="mt-16 border-t border-[var(--line)] pt-10">

          <div className="flex items-end justify-between">

            <h2 className="display text-3xl">Promotions</h2>

            <span className="kicker text-ash">Featured</span>

          </div>

          <ul className="mt-6 grid gap-px sm:grid-cols-2">

            {promotions.map((e) => (

              <li key={e.id} className="border-t border-gold/40 py-5 pr-5">

                <Link href={`/city/${slug}/event/${e.id}`} className="group block">

                  <span className="kicker text-gold">

                    {(TYPE_LABEL[e.type] ?? e.type).toUpperCase()} · {fmtEventTime(e.startsAt, tz)}

                  </span>

                  <p className="display mt-1 text-2xl text-bone group-hover:text-gold">

                    {e.title}

                  </p>

                </Link>

              </li>

            ))}

          </ul>

        </section>

      ) : null}

      {}

      {specials.length > 0 ? (

        <section className="mt-16 border-t border-[var(--line)] pt-10">

          <div className="flex items-end justify-between">

            <h2 className="display text-3xl">Special Events</h2>

            <span className="kicker text-ash">Causes &amp; specials</span>

          </div>

          <ul className="mt-6">

            {specials.map((e) => (

              <li

                key={e.id}

                className="flex items-center gap-5 border-b border-[var(--line)] py-6"

              >

                <div className="flex-1">

                  <Link

                    href={`/city/${slug}/event/${e.id}`}

                    className="display text-2xl text-bone hover:text-gold sm:text-3xl"

                  >

                    {e.title}

                  </Link>

                  <p className="kicker mt-1 text-ash">{fmtEventTime(e.startsAt, tz)}</p>

                </div>

                <span className="kicker border border-[var(--line)] px-3 py-1">

                  SPECIAL

                </span>

              </li>

            ))}

          </ul>

        </section>

      ) : null}

      {}

      <section className="mt-16 border-t border-[var(--line)] pt-10">

        <div className="flex items-end justify-between">

          <h2 className="display text-3xl">Post a set</h2>

          <span className="kicker">Anyone can add to the city</span>

        </div>

        <form action={addEvent} className="mt-6 flex flex-col gap-3">

          <input

            name="title"

            required

            placeholder="Event name (e.g. Saturday Night Set)"

            className="serif border-b border-[var(--line)] bg-transparent py-3 text-2xl text-bone outline-none placeholder:text-ash focus:border-gold"

          />

          <input

            name="description"

            placeholder="Add details, dress code, or a promo line (optional)"

            className="serif border-b border-[var(--line)] bg-transparent py-2 text-lg text-bone outline-none placeholder:text-ash focus:border-gold"

          />

          <div className="mt-2 flex flex-wrap items-center gap-4">

            <select

              name="type"

              className="kicker border border-[var(--line)] bg-stage px-4 py-3 text-bone outline-none focus:border-gold"

            >

              {EVENT_TYPE.map((t) => (

                <option key={t} value={t} className="bg-stage">

                  {(TYPE_LABEL[t] ?? t).toUpperCase()}

                </option>

              ))}

            </select>

            <input

              type="datetime-local"

              name="startsAt"

              className="kicker border border-[var(--line)] bg-stage px-4 py-3 text-bone outline-none focus:border-gold"

            />

            <label className="kicker flex items-center gap-2 text-ash">

              <input type="checkbox" name="isPromoted" className="h-4 w-4 accent-gold" />

              Promote

            </label>

            <button

              type="submit"

              className="kicker bg-gold px-6 py-3 text-stage hover:bg-gold-bright"

            >

              Post event

            </button>

          </div>

        </form>

      </section>

      {}

      <section className="mt-16 border-t border-[var(--line)] pt-10">

        <div className="flex items-end justify-between">

          <h2 className="display text-3xl">The Sets</h2>

          <span className="kicker text-ash">

            {String(sets.length).padStart(2, "0")} listed

          </span>

        </div>

        {sets.length === 0 ? (

          <p className="serif mt-8 text-xl text-ash">

            No sets yet. Post the first one above.

          </p>

        ) : (

          <ul className="mt-6">

            {sets.map((e, i) => (

              <li

                key={e.id}

                className="flex items-center gap-5 border-b border-[var(--line)] py-6"

              >

                <span className="kicker w-8 text-gold">

                  {String(i + 1).padStart(2, "0")}

                </span>

                <div className="flex-1">

                  <Link

                    href={`/city/${slug}/event/${e.id}`}

                    className="display text-2xl text-bone hover:text-gold sm:text-3xl"

                  >

                    {e.title}

                  </Link>

                  <p className="kicker mt-1 text-ash">{fmtEventTime(e.startsAt, tz)}</p>

                </div>

                <span className="kicker border border-[var(--line)] px-3 py-1">

                  {(TYPE_LABEL[e.type] ?? e.type).toUpperCase()}

                </span>

              </li>

            ))}

          </ul>

        )}

      </section>

      <SiteFooter />

    </main>

  );

}